<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: red;
            position:fixed;
        }
    </style>
</head>
<body>
<!--
定位（position)
 定位是一种更加高级的布局手段
 通过定位可以将元素摆放到页面的任意位置
 使用position属性来设置定位
 可选值：
      static 默认值，元素是静止的没有开启定位
      relative 开启元素的相对定位
      sticky 开启元素的粘滞定位
          粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
          position:sticky;top:100px;
      absolute 开启元素的绝对定位
      fixed 开启元素的固定定位
          固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样
          唯一不同的是固定定位永远参照于浏览器的视口进行定位
          固定定位的元素不会随网页的滚动条滚动
      层级：
          对于开启了定位元素，可以通过z-index属性来指定元素的层级
          z-index需要一个整数作为参数，值越大，元素的层级越高
          元素的层级越高则越优先显示。
          如果元素的层级一样，则优先显示靠下的元素
          祖先的元素的层级再高也不会盖住后代元素
-->
</body>
<div class="box">

</div>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/>
<br/>
<br/>









</html>